<template>
  <!-- 面包屑导航 -->
  <div className="break">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item style="font-size: 22px;padding: 15px 0 0 15px"><b>首页</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索工具栏 -->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <!-- 修改后的下拉菜单，增加样式使其更突出 -->
      <el-form-item label="食堂" prop="canteen">
        <el-select v-model="searchFormModel.canteen" placeholder="请选择食堂" clearable style="width: 150px; background-color: #f8f9fa; border: 1px solid #dee2e6;">
          <el-option label="第一食堂" value="第一食堂"></el-option>
          <el-option label="第二食堂" value="第二食堂"></el-option>
          <el-option label="第三食堂" value="第三食堂"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 优化查询按钮样式 -->
        <el-button type="success" @click="searchOnSubmit" style="background-color: #4CAF50; color: white; border-radius: 5px;">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 数据卡片 -->
  <div style="margin:20px">
    <el-row :gutter="20">
      <el-col :span="8" v-for="item in blogInfo" :key="item.id">
        <el-card style="margin-top: 30px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease" @click="viewDishes(item)">
          <div style="padding: 14px;">
            <!-- 标题样式优化 -->
            <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">{{ item.mname }}</h3>
            <el-image
                :style="{ width: '220px', height: '220px' }"
                :src="'http://localhost:8085' + item.mphotourl"
                :alt="'菜品图片 - '+item.dname"
                fit="cover"
                :preview-src-list="['http://localhost:8085' + item.mphotourl]"
            >
            </el-image>
            <p style="font-size: 14px; color: #666;">食堂: {{ item.canteen }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 菜品详情模态框，美化样式 -->
    <el-dialog v-model="dishesDialogVisible" title="菜品详情" width="60%" style="background-color: #f8f9fa; border-radius: 10px;">
      <div v-if="selectedDish">
        <h3 style="font-size: 20px; margin-bottom: 15px;">{{ selectedDish.name }}</h3>
        <p style="font-size: 16px; margin-bottom: 10px;">描述: {{ selectedDish.description }}</p>
        <!-- 其他菜品详情信息 -->
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, onMounted, reactive} from 'vue';
import router from "@/router";
import request from '@/utils/canteen';
import {ElMessage} from "element-plus";

/**
 * 定义数据列表 blogInfo 并初始化为空数组
 */
const  blogInfo=ref([])

/**
 * 在组件挂载时调用 getMall 函数获取数据
 */
onMounted(()=>{
  getMall()
})

/**
 * 获取商城数据的函数
 */
const getMall = () => {
  const params = {
    mname:'',
    mphotourl:'',
    canteen:''
  };
  //模糊查询
  if (searchFormModel.canteen && searchFormModel.canteen.trim()!== '') {
    params.canteen = searchFormModel.canteen.trim();
  }
  request({
    url: '/can/all',
    method: 'get',
    params:params,
  }).then((response) => {
    console.log(response)
    if (response.data.errorCode == 200) {
      blogInfo.value = response.data.data;
    } else {
      ElMessage.error('请求失败');
    }
  }).catch((error) => {
    ElMessage.error('请求失败');
  });
};

/**
 * 定义搜索表单的引用
 */
const searchFormRef=ref()

/**
 * 定义搜索表单模型，使用 reactive 使其具有响应式
 */
const searchFormModel=reactive({
  canteen:'',
})

/**
 * 处理搜索提交事件
 */
const searchOnSubmit=()=>{
  getMall()
}

/**
 * 处理搜索重置事件
 */
const searchOnReset=()=>{
  searchFormModel.canteen=''
}

/**
 * 存储选中的菜品信息
 */
const selectedDish = ref(null);

/**
 * 控制菜品详情模态框的显示状态
 */
const dishesDialogVisible = ref(false);

/**
 * 查看菜品详情的函数
 * @param {Object} item - 被点击的菜品对象
 */
const viewDishes = (item) => {
  // 将选中的菜品信息存储到 sessionStorage 中
  sessionStorage.setItem('selectedDish', JSON.stringify(item));
  // 使用 router.push 进行页面跳转
  router.push({
    path: `/home/canteen/candish`,
    query: { mid: item.mid }  // 将 mid 作为查询参数
  });
  // 假设每个item有一个id属性
  request({
    url: '/dishes/all',
    method: 'get',
    params: params,
  }).then((response) => {
    if (response.data.errorCode == 200) {
      selectedDish.value = response.data.data; // 假设返回的数据是对象
      dishesDialogVisible.value = true; // 显示模态框
    } else {
      ElMessage.error('请求失败');
    }
  }).catch((error) => {
    ElMessage.error('请求失败');
  });
};

</script>

<style scoped>
/* 优化行的样式 */
.el-row {
  margin-bottom: 20px;
}
.el-row :last-child {
  margin-bottom: 0;
}

/* 为页面添加一些全局样式 */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}
</style>